<template>
    <div>

        <div class="headerSty1" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="textSty">文件归档</div>
            </div>
            <div>
                <el-form>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="" label-width="40px">
                                <el-table :data="fileList" style="width: 100%">
                                    <el-table-column type="index" label="序号" width="80">
                                    </el-table-column>
                                    <el-table-column prop="fileName" label="文件名称">
                                    </el-table-column>
                                    <el-table-column prop="name" label="上传状态">
                                        <template slot-scope="scope">
                                            {{ scope.row.filePath ? '已上传' : '未上传' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="updateTime" label="上传时间">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="text"
                                                @click="downloadList(scope.row)">下载</el-button>
                                            <el-button size="mini" type="text"
                                                v-if="scope.row.type == 3 && scope.row.filePath"
                                                @click="downloadElcContract(scope.row)">电子合同下载</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { getAnnexList, getCustomerDetail, dowRichText } from "@/api/contract/contractOrg";
import { tansParams, blobValidate } from "@/utils/ruoyi";
import { saveAs } from 'file-saver'
export default {
    props: {
        dataForm: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            form: {},
            // 表单校验
            rules: {},
            tableData: [],
            reverse: true,
            fileList: [],
            // baseUrl: 'http://192.168.3.218:8082'
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            getAnnexList(this.dataForm.contractId).then(res => {
                this.fileList = res.data
            })
        },
        // 下载
        downloadList(row) {
            this.$download.resource(row.filePath, row.fileName);
        },
        // 电子合同下载
        downloadElcContract(row) {
            getCustomerDetail(row.contractId).then(res => {
                dowRichText({
                    fileName: res.data.name,
                    data: res.data.contractRichText
                }).then(async (data) => {
                    const isBlob = blobValidate(data.data);
                    const filename = decodeURIComponent(data.filename);
                    if (isBlob) {
                        saveAs(data.data, filename)
                    } else {
                        const resText = await data.text();
                        const rspObj = JSON.parse(resText);
                        const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
                        Message.error(errMsg);
                    }
                })
            })
        },
        // 提交
        subFileDoc() {
            this.dataForm.status = 9
            this.$nextTick(() => {
                this.$emit('refreshAllDio', this.dataForm)
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.headerSty {
    display: flex;
    justify-content: space-between;
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 700;
        }


    }

}

.headerSty1 {
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty1 {
            margin-left: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 600;
        }
    }

}

.navSty {
    height: 15px;
    width: 5px;
    background: rgb(90, 156, 248);
}


.contSty {
    display: flex;

    .contLeftSty {
        height: 80px;
        width: 5px;
        background: rgb(90, 156, 248);
    }

    .allBlo {
        margin-left: 5px;
    }

    .LastBlockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: white;
        border-radius: 5px;
        color: rgb(90, 156, 248);
        border: 1px solid rgb(90, 156, 248);

        .el-icon-warning {
            color: rgb(90, 156, 248);
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .blockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: rgb(90, 156, 248);
        border-radius: 5px;
        color: white;

        .el-icon-check {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }

        .el-icon-close {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .lastTeSty {
        flex: 1;
        height: 120px;
        background: white;
        margin-left: 10px;
        border-radius: 5px;
        border: 1px solid rgb(90, 156, 248);
        overflow-y: auto;
    }
}

.text1 {
    font-size: 14px;
    font-weight: 500;
}

.text2 {
    font-size: 14px;
    color: #999;
}

.el-icon-arrow-right {
    color: rgb(90, 156, 248);
    font-weight: bolder;
    margin: 0 10px;
    font-size: 32px;
}
</style>